import "./index.scss";
import { useMemo } from "react";
type BtnProps = {
  defaultDirection: "right" | "left";
  toggleFn?: () => void;
  expand?: boolean;
};
export function StretchBtn(props: BtnProps) {
  const { defaultDirection = "right", toggleFn, expand = true } = props;
  const iconDirection = useMemo(() => {
    if (defaultDirection === "right") {
      return expand ? "iconLeft" : "iconRight";
    } else {
      return expand ? "iconRight" : "iconLeft";
    }
  }, [expand]);
  const clickFn = () => {
    toggleFn && toggleFn();
  };
  return (
    <div
      className={`
        stretchBtn
        ${defaultDirection === "right" ? "btnRight" : "btnLeft"}
        ${iconDirection}
        flex items-center bg-white absolute 
        top-1/2 -translate-y-1/2 w-[14px] h-14
        cursor-pointer
        `}
      onClick={clickFn}
    ></div>
  );
}
